<template>
    <div class="main-content">
        <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' 
        :eCharts3State='eCharts3State' :chartsListState='chartsListState' :tableState='tableState'>
            <div slot="form">
                <el-form :model="query" ref="query" label-width="70px" label-position="right">
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="省份" prop="provinceId">
                                <province v-model="query.provinceId" :name.sync="query.provinceName"></province>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="市区" prop="cityId">
                                <city v-model="query.cityId" :province="query.provinceId" :name.sync="query.cityName"></city>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="区县" prop="areaId">
                                <region v-model="query.areaId" :city="query.cityId" :name.sync="query.areaName"></region>
                            </el-form-item>
                        </el-col>
                        
                    </el-row> 
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="周期">
                                 <el-select v-model="query.timeDuring" placeholder="请选择" style="width:100%" @change="timeDuringChange">
                                    <el-option v-for="item in timeDuringList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3" :offset="14">
                            <div class="top-line">
                                <el-button type="primary" class="btn-common" @click="onSubmit">查询</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </div> 
            <div slot="eCharts1" v-loading="chartLoading">
                <div class="charts-title">用户活跃频数统计</div>
                <div class="charts-display" >
                    <trendChart width='100%' height='100%' id="trendChart1" :option='barChart1Option'></trendChart>
                </div>
            </div>
            <div slot="table" >
                <div class="table-title">
                    <exportExcel @ee="exportFile"></exportExcel>
                </div> 
                <el-table :data="tableData" border v-loading="loading" style="width: 100%"  @sort-change='sortChange'>
                    <el-table-column label="忠诚用户数" align="center" sortable='custom' prop="loyalNumber">
                        <template scope="scope">
                            <span>{{scope.row.loyalNumber | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="连续活跃人数" align="center" sortable='custom' prop="continueNumber">
                        <template scope="scope">
                            <span>{{scope.row.continueNumber | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="本周回流人数" align="center" sortable='custom' prop="backNumber">
                        <template scope="scope">
                            <span>{{scope.row.backNumber | isNull}}</span>
                        </template>
                    </el-table-column>
    
                    <el-table-column label="近期流失人数" align="center" sortable='custom' prop="loseNumber">
                        <template scope="scope">
                            <span>{{scope.row.loseNumber | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="卸载用户" align="center" sortable='custom' prop="uninstallNumber">
                        <template scope="scope">
                            <span>{{scope.row.uninstallNumber | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="区域" align="center">
                        <template scope="scope">
                            <span>{{scope.row.areaName | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="城市" align="center">
                        <template scope="scope">
                            <span>{{scope.row.cityName | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="省份" align="center">
                        <template scope="scope">
                            <span>{{scope.row.provinceName| isNull}}</span>
                        </template>
                    </el-table-column>
                 
                    <el-table-column label="统计日期" align="center">
                        <template scope="scope">
                            <span>{{scope.row.countTime| isNull}}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-container">
                    <el-pagination
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageQuery.total"
                        :current-page.sync="pageQuery.currentpage"
                        :page-sizes="config.pageSizes"
                        :page-size="config.pageSize"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </echartsLayout>
    </div>
</template>

<script>
    import moment from 'moment';
    import province from 'components/CascadeRegion/province';
    import city from 'components/CascadeRegion/city';
    import region from 'components/CascadeRegion/region';
    import echartsLayout from 'components/TableLayout/echartsLayout'; 
    import trendChart from 'components/Charts/trendChart';
    import exportExcel from 'components/ExportExcel'; 
    import { userActiveFrequentAnalysis, userActiveFrequentAnalysisPage } from 'api/pingtaifenxi';
    import { mapState, mapActions } from 'vuex';
    export default{
        name: 'userActiveFre',
        components: {province, city, region, echartsLayout, trendChart, exportExcel},
        data() {
            return {
                chartLoading: false,
                loading: false,
                formState: false,
                dataListState: true,
                eCharts1State: false,
                eCharts2State: true,
                eCharts3State: true,
                chartsListState: true,
                tableState: false,
                query: {
                    provinceId: '',
                    cityId: '',
                    areaId: '',
                    provinceName: '',
                    cityName: '',
                    areaName: '',
                    timeDuring: 2
                },
                timeDuringList: [
                    // {value: 1, label: '本周'},
                    {value: 2, label: '上周'},
                    {value: 3, label: '两周前'},
                    {value: 4, label: '三周前'}
                ],
               /*  startDate: moment().day('Monday').format('YYYY-MM-DD'), // 开始时间
                endDate: moment(new Date()).format('YYYY-MM-DD'), */
                startDate: null, // 开始时间
                endDate: null,
                loyaltyUserNumberStatus: '', // 忠诚 0 升序 1降序
                continuousActivityNumberStatus: '', // 连续活跃 0 升序 1降序
                thisWeekComeBackNumberStatus: '', // 本周回流 0 升序 1降序
                lostUserNumberStatus: '', // 流失 0 升序 1降序
                uninstallUserNumberStatus: '', // ， 卸载0 升序 1降序
                tableData: [],
                pageQuery: {
                    currentpage: 1,
                    total: 0
                },
                barChart1Option: null,
                currentDate: moment(new Date()).format('YYYY-MM-DD')
            }
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            })
        },
        created() {
          
            var weekOfday = Number(moment().format('E'));// 计算今天是这周第几天  
            let start=-(weekOfday+7);
            let end=-weekOfday;
            start=-(weekOfday+6);
            end=-weekOfday;
            this.startDate = moment(new Date()).add(start, 'days').format('YYYY-MM-DD');// 周一日期  
            this.endDate = moment(new Date()).add(end, 'days').format('YYYY-MM-DD');// 周日日期  
            this.queryDataChart();
            this.getTableList();
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.currentpage = 1;
                this.ChangePageSize(val);
                this.getTableList();
            },
            handleCurrentChange(val) {
                this.pageQuery.currentpage = val;
                this.getTableList();
            },
            timeDuringChange(val) {
                var weekOfday = Number(moment().format('E'));// 计算今天是这周第几天  
                let start=-(weekOfday+7);
                let end=-weekOfday;
                // if (val==1) {
                //     this.startDate=moment().day('Monday').format('YYYY-MM-DD')// 周一
                //     this.endDate=moment(new Date()).format('YYYY-MM-DD')// 今天
                // }
                if (val==2) {
                    start=-(weekOfday+6);
                    end=-weekOfday;
                    this.startDate = moment(new Date()).add(start, 'days').format('YYYY-MM-DD');// 周一日期  
                    this.endDate = moment(new Date()).add(end, 'days').format('YYYY-MM-DD');// 周日日期  
                }
                if (val==3) {
                    start=-(weekOfday+13);
                    end=-(weekOfday+7);
                    this.startDate = moment(new Date()).add(start, 'days').format('YYYY-MM-DD');// 周一日期  
                    this.endDate = moment(new Date()).add(end, 'days').format('YYYY-MM-DD');// 周日日期  
                }
                if (val==4) {
                    start=-(weekOfday+20);
                    end=-(weekOfday+14);
                    this.startDate = moment(new Date()).add(start, 'days').format('YYYY-MM-DD');// 周一日期  
                    this.endDate = moment(new Date()).add(end, 'days').format('YYYY-MM-DD');// 周日日期  
                }
            },
            // 图
            queryDataChart() {
                let startDate=moment(this.startDate).format('YYYY-MM-DD'),
                    endDate=moment(this.endDate).format('YYYY-MM-DD'),
                    provinceName=this.query.provinceName,
                    cityName=this.query.cityName,
                    areaName=this.query.areaName;
                userActiveFrequentAnalysis(startDate, endDate, provinceName, cityName, areaName).then(res => {
                    this.chartLoading = false;
                    let dataList=[];
                    let data=res.data.content?res.data.content[0]:null;
                    // res.data.content.forEach(val=>{
                    //     backNumberSum//回流
                    //     loyalNumberSum//忠诚
                    //     loseNumberSum//流失
                    //     uninstallNumber//卸载
                    //     continueNumber//继续活跃
                    // })
                    if (data) {
                        dataList=[data.loyalNumberSum, data.continueNumberSum, data.backNumberSum, data.loseNumberSum, data.uninstallNumberSum]
                    } else {
                        dataList=[]
                    }
                    // console.log(dataList, '=====')
                    this.barChart1Option = {
                        color: ['#2EC7C9', '#B6A2DE', '#5AB1EF', '#FFB980', '#E3A1A6'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        legend: {
                            // show: false,
                            data: ['忠诚用户数', '连续活跃人数', '本周回流人数', '近期流失人数', '卸载用户'] 
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: ['忠诚用户数', '连续活跃人数', '本周回流人数', '近期流失人数', '卸载用户'] 
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '总数',
                                type: 'bar',
                                data: dataList
                            }
                        ]
                    };
                    
                }).catch(() => {
                    this.chartLoading = false;
                });
            },
            getTableList() {
                // moment(new Date()).format('YYYY-MM-DD')
                this.loading = true;
                let page=this.pageQuery.currentpage,
                    pageSize=this.config.pageSize,
                    startDate=moment(this.startDate).format('YYYY-MM-DD'),
                    endDate=moment(this.endDate).format('YYYY-MM-DD'),
                    provinceName=this.query.provinceName,
                    cityName=this.query.cityName,
                    areaName=this.query.areaName,
                    loyaltyUserNumberStatus=this.loyaltyUserNumberStatus,
                    continuousActivityNumberStatus=this.continuousActivityNumberStatus,
                    thisWeekComeBackNumberStatus=this.thisWeekComeBackNumberStatus,
                    lostUserNumberStatus=this.lostUserNumberStatus,
                    uninstallUserNumberStatus=this.uninstallUserNumberStatus;
                userActiveFrequentAnalysisPage(page, pageSize, startDate, endDate, provinceName, cityName, areaName, loyaltyUserNumberStatus, continuousActivityNumberStatus, thisWeekComeBackNumberStatus, lostUserNumberStatus, uninstallUserNumberStatus)
                .then(res => {
                    this.loading = false;
                    this.tableData = res.data.content.list;
                    this.pageQuery.total = res.data.content.pagination?res.data.content.pagination.total:0;
                }).catch(() => {
                    this.loading = false;
                })
            },
            exportFile() {
                 
                let startDate=moment(this.startDate).format('YYYY-MM-DD'),
                    endDate=moment(this.endDate).format('YYYY-MM-DD'),
                    provinceName=this.query.provinceName,
                    cityName=this.query.cityName,
                    areaName=this.query.areaName,
                    loyaltyUserNumberStatus=this.loyaltyUserNumberStatus,
                    continuousActivityNumberStatus=this.continuousActivityNumberStatus,
                    thisWeekComeBackNumberStatus=this.thisWeekComeBackNumberStatus,
                    lostUserNumberStatus=this.lostUserNumberStatus,
                    uninstallUserNumberStatus=this.uninstallUserNumberStatus;
                window.location.href = `${LOCAL_API.scy}/report/user/outExcelUserActiveFreCount?startDate=${startDate}&endDate=${endDate}&provinceName=${provinceName}&cityName=${cityName}&areaName=${areaName}&loyaltyUserNumberStatus=${loyaltyUserNumberStatus}&continuousActivityNumberStatus=${continuousActivityNumberStatus}&thisWeekComeBackNumberStatus=${thisWeekComeBackNumberStatus}&lostUserNumberStatus=${lostUserNumberStatus}&uninstallUserNumberStatus=${uninstallUserNumberStatus}`
                    
            },
            onSubmit() {
                this.pageQuery.currentpage = 1;
                this.queryDataChart();
                this.getTableList();
            },
            sortChange({ column, prop, order }) {
                this.loyaltyUserNumberStatus=prop=='loyalNumber'?order=='ascending'?'0':'1':'';
                this.continuousActivityNumberStatus =prop=='continueNumber'?order=='ascending'?'0':'1':'';
                this.thisWeekComeBackNumberStatus =prop=='backNumber'?order=='ascending'?'0':'1':'';
                this.lostUserNumberStatus =prop=='loseNumber'?order=='ascending'?'0':'1':'';
                this.uninstallUserNumberStatus =prop=='uninstallNumber'?order=='ascending'?'0':'1':'';
                this.pageQuery.currentpage = 1;
                this.getTableList();
            }
        }
    }
</script>
<style lang="scss" scoped>
    .main-content {
        position: relative;
        $bgcolor: #fff;
    }
</style>                     